<template>
  <view class="">
    <base-header />
    <view class="">
      <image class="goods-img" :src="detail.logo" mode="" />
      <view class="flex-ba goods-price">
        <view class="">
          <text class="text-12">￥</text>
          <text class="text-20 text-bold">{{ detail.price }}</text>
          <text class="goods-original-price">原价：{{ detail.original_price }}</text>
        </view>
        <view class="">学习人数：{{ detail.buy }}</view>
      </view>
      <view class="bg-white mb-12 p-16">
        <view class="ellipsis-1 text-16 leading-20">{{ detail.name }}</view>
        <view class="text-info text-12 mt-10">
          <text class="">浏览量：{{ detail.browse }}</text>
          <text class="ml-20">收藏数：{{ detail.collection }}</text>
        </view>
      </view>
      <view class="bg-white">
        <view class="text-16 text-info hair--b flex-aa">
          <view v-for="(item, i) in tabs" :key="i" class="goods-tab" :class="active === i ? 'goods-tabActive' : ''" @click="onTab(i)">{{ item }}</view>
        </view>
        <view v-show="active === 0" class="">
          <view v-if="detail.content" class="p-14">
            <mp-html lazy-load :content="detail.content" />
          </view>
          <view v-else class="text-center">
            <image class="empty-img" src="@/static/img/empty.png" mode="widthFix" />
            <view class="text-info pb-20">暂无内容</view>
          </view>
        </view>
        <view v-show="active === 1" class="tree">
          <view v-if="catalogue" class="p-15">
            <view v-for="(v1, k1) in catalogue" :key="k1" class="mb-10">
              <view class="flex-a tree-title tree-bar" @click="onNode(v1)">
                <view class="flex-1 ellipsis-1">{{ v1.title }}</view>
                <view v-if="v1.children.length" class="iconfont" :class="v1.show ? 'icon-up' : 'icon-down'" />
              </view>
              <view v-show="v1.show" class="pl-6">
                <view v-for="(v2, k2) in v1.children" :key="k2" class="">
                  <view class="tree-title flex-a hair--b" @click="onNode(v2)">
                    <view class="flex-1 ellipsis-1">{{ v2.title }}</view>
                    <view v-if="v2.children.length" class="iconfont" :class="v2.show ? 'icon-up' : 'icon-down'" />
                  </view>
                  <view v-show="v2.show" class="pl-6">
                    <view v-for="(v3, k3) in v2.children" :key="k3" class="">
                      <view class="tree-title flex-a hair--b" @click="onNode(v3)">
                        <view class="flex-1 ellipsis-1">{{ v3.title }}</view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-show="active === 2" class="px-16">
          <view v-for="item in detail.packList" :key="item.id" class="py-20 hair--b">
            <view class="ellipsis-2 text-16 leading-22 mb-10">{{ item.name }}</view>
            <view class="px-10 py-6 bg-F5F7FB rounded-4 mb-5">
              <view v-for="v in item.goods_list" :key="v.id" class="flex py-4" @click="goGoods(v.id)">
                <image class="pack-goodsImg" :src="v.logo" mode="" />
                <view class="flex-vb">
                  <view class="ellipsis-2">{{ v.name }}</view>
                  <view class="text-error"><text class="text-12">￥</text><text class="text-16">{{ v.price }}</text></view>
                </view>
              </view>
            </view>
            <view class="flex-ba h-40 px-10 bg-F5F7FB rounded-4">
              <view class="text-info">{{ item.goods_list.length }}门课总价：<text class="line-through"><text class="text-12">￥</text>{{ item.original_price }}</text></view>
              <view class="text-error">套餐价格：<text class="text-12">￥</text><text class="text-16">{{ item.price }}</text></view>
            </view>
            <view class="mt-15">
              <button type="warn" class="round" @click="goPay(item.id, 2)">立即购买</button>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom-bar">
      <view class="bottom-fixed flex-ba shadow-t px-16">
        <view class="flex-a text-center">
          <view class="" @click="onCollection">
            <view class="iconfont text-20" :class="detail.is_collection ? 'icon-favorfill' : 'icon-favor'" />
            <view class="text-10">收藏</view>
          </view>
          <view v-if="!$f.isH5()" class="ml-25 share-box">
            <view class="iconfont icon-share text-20" />
            <view class="text-10">分享</view>
            <button class="share-btn" open-type="share" />
          </view>
          <view v-else class="ml-25" @click="onShare">
            <view class="iconfont icon-share text-20" />
            <view class="text-10">分享</view>
          </view>
        </view>
        <view class="flex-a">
          <view class="text-info mr-5">(购买后有效期{{ detail.time_num }}{{ detail.time_type_name }})</view>
          <button type="warn" :disabled="!!detail.is_buy" class="round" @click="goPay(detail.id)">{{ detail.is_buy ? '已购买' : '立即购买' }}</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      tabs: ['材料详情', '材料目录', '材料推荐'],
      active: 0,
      id: 0,
      detail: {},
      catalogue: null,
      loading: false
    }
  },
  computed: {
    token() {
      return this.$store.state.token
    }
  },
  onLoad(options = {}) {
    this.id = Number(options.id)
    this.getDetail()
  },
  onShareAppMessage() {
	 return this.$f.wxShare()
  },
  onShareTimeline() {
    return this.$f.wxShare()
  },
  methods: {
    onTab(i) {
      if (this.active === i) return
      this.active = i
      if (i === 1 && this.loading) {
        uni.showLoading({
          title: '加载中'
        })
      } else {
        uni.hideLoading()
      }
    },
    goGoods(id) {
      this.$Router.push('/pages/detail/goods?id=' + id)
    },
    goPay(goodsId, type) {
      if (this.$f.checkLogin()) {
        let url = '/pages/user/pay?goodsId=' + goodsId
        if (type === 2) {
          url += `&type=${type}`
        }
        this.$Router.push(url)
      }
    },
    onNode(data) {
      if (data.children.length) {
        data.show = !data.show
      } else if (data.file_id) {
        this.$Router.push('/pages/detail/file?id=' + data.file_id)
      }
    },
    getDetail() {
      this.$f.post('api/goodsInfo', { id: this.id }).then(res => {
        this.detail = res.data
        this.getCatalogue()
      })
    },
    getCatalogue() {
      this.loading = true
      this.$f.post('api/goodsCatalogue', { id: this.id }).then(res => {
        this.catalogue = this.formatCatalogue(res.data)
      }).finally(() => {
        uni.hideLoading()
        this.loading = false
      })
    },
    formatCatalogue(data = []) {
      return data.map(v => {
        v.show = false
        if (v.children.length) {
          v.children = this.formatCatalogue(v.children)
        }
        return v
      })
    },
    onShare() {
      if (this.$f.checkLogin()) {
				const url = this.$f.getShareLink()
				this.$f.copy(url)
			}
    },
    onCollection() {
      if (this.$f.checkLogin()) {
        this.$f.post('common/collection', { object_id: this.detail.id, type: 1 }).then(res => {
          this.$f.toast(res.msg)
          if (res.code === 0) {
            this.detail.is_collection = this.detail.is_collection ? 0 : 1
          }
        })
      }
    }
  }
}
</script>

<style lang="scss">
.goods-img {
	display: block;
	width: 100%;
	height: 400rpx;
}
.goods-price {
	height: 80rpx;
	line-height: 48rpx;
	color: #fff;
	padding: 0 30rpx;
	background-color: $uni-error;
}
.goods-original-price {
	opacity: 0.5;
	margin-left: 10rpx;
	text-decoration: line-through;
}
.goods-tab {
	height: 88rpx;
	line-height: 88rpx;
	border-top: 6rpx solid transparent;
	border-bottom: 6rpx solid transparent;
	&.goods-tabActive {
		border-bottom-color: $uni-primary;
	}
}
.icon-favorfill {
	color: #FFD600;
}
.bottom-bar {
	height: 108rpx;
}
.bottom-fixed {
	position: fixed;
	width: 100%;
	left: 0;
	bottom: 0;
	height: 108rpx;
	box-sizing: border-box;
	background-color: #fff;
	.iconfont {
		font-size: 44rpx;
		height: 44rpx;
		line-height: 44rpx;
		margin-bottom: 4rpx;
	}
}
.tree {
	.iconfont {
		font-size: 28rpx;
		color: #8493A6;
	}
}
.tree-bar {
	font-weight: bold;
	border-radius: 8rpx;
	background-color: #F6F7FB;
}
.tree-title {
	height: 80rpx;
	padding: 0 10px;
}
.pack-goodsImg {
	display: block;
	flex-shrink: 0;
	width: 240rpx;
	height: 136rpx;
	border-radius: 8rpx;
	margin-right: 16rpx;
}
.share-box {
	position: relative;
}
.share-btn {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 100;
}
</style>
